<template>
  <div class="app-container">
    <!-- Search and Filter Section -->
    <el-card class="filter-container">
      <el-form :inline="true" :model="listQuery" ref="searchForm">
        <el-form-item label="订单号" prop="order_no">
          <el-input v-model="listQuery.order_no" placeholder="订单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="退款单号" prop="refund_no">
          <el-input v-model="listQuery.refund_no" placeholder="退款单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="退款状态" prop="status">
          <el-select v-model="listQuery.status" placeholder="退款状态" clearable>
            <el-option v-for="item in refundStatusOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- Refund List Table -->
    <el-card class="table-container">

      <refund-records-list
        :records="list"
        :loading="listLoading"
        :show-pagination="true"
        :total="total"
        :current-page="listQuery.page"
        :page-size="listQuery.limit"
        @query-status="handleQueryRefund"
        @view-order="handleViewOrder"
        @size-change="handleSizeChange"
        @page-change="handlePageChange"
      />
    </el-card>

    <!-- Refund Detail Dialog -->
    <el-dialog title="退款详情" :visible.sync="dialogVisible" width="50%">
      <div v-if="currentRefund">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="退款单号">{{ currentRefund.refund_no }}</el-descriptions-item>
          <el-descriptions-item label="订单号">{{ currentRefund.order_no }}</el-descriptions-item>
          <el-descriptions-item label="退款金额">¥{{ currentRefund.refund_amount.toFixed(2) }}</el-descriptions-item>
          <el-descriptions-item label="退款状态">
            <el-tag :type="getStatusType(currentRefund.status)">{{ getStatusText(currentRefund.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="退款原因" :span="2">{{ currentRefund.reason }}</el-descriptions-item>
          <el-descriptions-item label="微信退款ID" :span="2">{{ currentRefund.wx_refund_id || '暂无' }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ currentRefund.create_time | formatDate }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{ currentRefund.update_time | formatDate }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { http } from '@/api';
import { formatDate } from '@/utils';
import RefundRecordsList from '@/components/RefundRecordsList';

export default {
  name: 'OfficeRefundList',
  components: {
    RefundRecordsList
  },
  filters: {
    formatDate(time) {
      return formatDate(time);
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        order_no: undefined,
        refund_no: undefined,
        status: undefined
      },
      refundStatusOptions: [
        { value: 0, label: '待处理' },
        { value: 1, label: '处理中' },
        { value: 2, label: '退款成功' },
        { value: 3, label: '退款失败' }
      ],
      dialogVisible: false,
      currentRefund: null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.listLoading = true;
      try {
        const response = await http.officeOrderRefund.page(this.listQuery);
        this.list = response.data.list;
        this.total = response.data.total;
      } catch (error) {
        console.error('Failed to fetch refund list:', error);
        this.$message.error('获取退款列表失败');
      } finally {
        this.listLoading = false;
      }
    },
    handleSearch() {
      this.listQuery.page = 1;
      this.getList();
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.listQuery.page = 1;
      this.getList();
    },
    getStatusType(status) {
      const statusMap = {
        0: 'info',
        1: 'warning',
        2: 'success',
        3: 'danger'
      };
      return statusMap[status] || 'info';
    },
    getStatusText(status) {
      const statusMap = {
        0: '待处理',
        1: '处理中',
        2: '退款成功',
        3: '退款失败'
      };
      return statusMap[status] || '未知状态';
    },
    async handleQueryRefund(row) {
      try {
        this.$message.info('正在查询退款状态...');
        const response = await http.officeOrder.queryRefund(row.id);
        if (response.code === 0) {
          this.$message.success('查询成功');
          this.getList(); // Refresh the list to show updated status
        } else {
          this.$message.error(response.message || '查询退款状态失败');
        }
      } catch (error) {
        console.error('Failed to query refund status:', error);
        this.$message.error('查询退款状态失败');
      }
    },
    handleViewOrder(row) {
      this.$router.push({ name: 'office-order-detail', params: { id: row.order_id } });
    },
    handleViewDetail(row) {
      this.currentRefund = row;
      this.dialogVisible = true;
    },
    handleSizeChange(size) {
      this.listQuery.limit = size;
      this.getList();
    },
    handlePageChange(page) {
      this.listQuery.page = page;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.table-container {
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.table-title {
  font-size: 18px;
  font-weight: bold;
}
</style>
